<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix:after{
				content: " ";
				display:block;
				clear: both;
			}
			.clearfix{
				zoom: 1;
			}
			html{height: 100%;}
			body{
				width: 100%;
				height: 100%;
				color: #fff;
				background:skyblue;
			}
			input::-webkit-input-placeholder{
				color: #DAD8D9;
			}
			.searchBox{
			 	margin: 0 auto;
			}
			#cityNameInput{
				border: none;
				border-bottom: 1px solid rgba(255,255,255,0.5);
				height: 35px;
				line-height: 35px;
				padding-left: 10px;
				outline: none;
				background: skyblue;
				color: #fff;
			}
			.searchBtn{
				display: inline-block;
				height: 37px;
				line-height: 37px;
				padding: 0 10px;
				background: orange;
				color: #fff;
			}
			.weatherBox{
				width: 565px;
				height: 600px;
				
				margin:  50px auto;
				text-align: center;
				position: relative;
			}
			.temperature{
				margin-top: 100px;
				margin-left:auto;
				margin-right: auto;
				width: 35%;
			}
			.temperDes{
				margin-top: 8px;
			}
			h1{
				font-size: 50px;
				margin-right: 3px;
			}
			.weatherGuggest{
				position: absolute;
			    top: 156px;
			    right: 0px;
			    width: 164px;
			    text-align:left;
			}
			.weatherBottom{
				text-align: left;
				margin-top: 50px;
				margin-left: 44px;
			}
			.item{
				width: 30%;
				text-align: center;
				
				border-right: 1px solid #fff;
			
				padding: 50px 8px;
			}
			.item:nth-child(1){
				border-left: 1px solid #fff;
			}
			.weatherBottom .item p:nth-child(5){
				margin-top: 8px;
				margin-bottom: 8px;
			}
			.weatherbg{
				background: url('http://thumb106.hellorf.com/preview/291894305.jpg') no-repeat;
				width: 45px;
			    height: 45px;
			    background-position: -32px -27px;
			    margin: 10px auto;
			}
			.date{
				color: #DAD8D9;
			}
			
		</style>
	</head>
	<body>
		<div class="weatherBox">
			<div class="searchBox">
				<input type="text" placeholder="请输入你要查询的城市名称" id="cityNameInput" />
				<span class="searchBtn">查询</span>
			</div>
			
			<div class="clearfix temperature">
				<h2 class="fl" id="cityName"></h2>
				<h1 class="fl" id="temp"></h1>
				<p class="fl">℃</p>
				<p class="fl temperDes" id="temperDes"></p>
			</div>
			<div class="weatherInfo">
				<p id='date'></p>
				<p id='temArea'></p>
				<p id="dressing_index"></p>
				<p id="wind_directio"></p>
			</div>
			
			<div class="weatherGuggest">
				<p id="dressing_advice"></p>
			</div>
			
			<div class="weatherBottom clearfix">
				<div class="item fl">
					<p></p>
					<p class="date"></p>
					<div class="weatherbg"></div>
					<p></p>
					<p></p>
					<p></p>
				</div>
				
				<div class="item fl">
					<p></p>
					<p class="date"></p>
					<div class="weatherbg"></div>
					<p></p>
					<p></p>
					<p></p>
				</div>
				
				<div class="item fl">
					<p></p>
					<p class="date"></p>
					<div class="weatherbg"></div>
					<p></p>
					<p></p>
					<p></p>
				</div>
			</div>
		</div>
		<script src=""></script>
		<script type="text/javascript">
			var oCityNameInput = document.getElementById('cityNameInput');
			var aSearchBtn = document.getElementsByClassName('searchBtn')[0];
			createOS("北京");
			aSearchBtn.onclick = function(){
				var val = oCityNameInput.value;
				if (val=='') {
					alert('请输入你要查询的城市');
					return false;
				}
				createOS(val);
			}
			function createOS(val){
				var time = new Date().getTime();
				console.log(time);
				var script = document.createElement('script');
				script.src = 'http://v.juhe.cn/weather/index?cityname='+val+'&dtype=jsonp&callback=success&format=&key=656d9fb8ceca544de2de2cb9692608c1&time='+time;			
				document.body.appendChild(script);
				script.onload = function(){
					document.body.removeChild(script);
				}
			}
		</script>
		<script>
			function success(data){
				console.log(data);
				var cityName = document.getElementById('cityName');
				var temp = document.getElementById('temp');
				var temperDes = document.getElementById('temperDes');
				var temArea = document.getElementById('temArea');
				var wind_directio  = document.getElementById("wind_directio");
				var dressing_advice = document.getElementById("dressing_advice");
				var dressing_index = document.getElementById("dressing_index");
				var DatE = document.getElementById('date');
				if (data.resultcode==200) {
					var result = data.result;
					var sk = result.sk;
					var today = result.today;
					var future = result.future;
					
					cityName.innerHTML = today.city;
					temp.innerHTML = sk.temp;
					temperDes.innerHTML = today.weather;
					temArea.innerHTML = today.temperature;
					wind_directio.innerHTML = today.wind;
					dressing_advice.innerHTML = today.dressing_advice;
					dressing_index.innerHTML = today.dressing_index;
					DatE.innerHTML = today.date_y + ' '+today.week;
				
				
				//future的天气
				var  futureWeek = document.querySelectorAll('.weatherBottom .item p:nth-child(1)');
				var  futureDate = document.querySelectorAll('.weatherBottom .item p:nth-child(2)');
				var  futuretemArea = document.querySelectorAll('.weatherBottom .item p:nth-child(4)');
				var  futuretemWeather = document.querySelectorAll('.weatherBottom .item p:nth-child(5)');
				var  futuretemWind = document.querySelectorAll('.weatherBottom .item p:nth-child(6)');
				
					
				function GetDate(num){
					
					var d = new Date();
					d.setDate(d.getDate()+num);
					console.log(d);
					
					var Y = d.getFullYear();
					console.log(Y)
					var M = d.getMonth()+1;
					var D = d.getDate();
					var YMD = Y+formatNumber(M)+formatNumber(D);
					
					return "day_"+YMD;
				}
				
				
				
				for (var i = 0; i <futureWeek.length; i++) {
					var zlr = GetDate(i+1);
					
					console.log(future[zlr].week);
					console.log(futureWeek[i])
					
					futureWeek[i].innerHTML= future[zlr].week;
					futureDate[i].innerHTML = future[zlr].date;
					futuretemArea[i].innerHTML = future[zlr].temperature;
					futuretemWeather[i].innerHTML = future[zlr].weather;
					futuretemWind[i].innerHTML =future[zlr].wind;
				}
				
				}else{
					var reason = data.reason
					alert(reason)
				}
			}
			function formatNumber(n) {
			  n = n.toString()
			  return n[1] ? n : '0' + n
			}

		</script>
	</body>
</html>
